Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Click the dot. Dragging works too.
body, html { background-color: black; height: 100%; margin: 0; padding: 0; overflow: hidden; } #emitter { background-color: #222; position: absolute; width: 100px; height: 100px; border-radius: 50%; top: 50%; left: 50%; } .dot { background-color: #4c9a0f; border-radius: 50%; position: absolute; } #instructions { position: fixed; top: 10px; text-align: center; color: #999; width: 100%; font-family: Arial, sans-serif; }
var emitter = document.getElementById("emitter"), //we'll put all the dots into this container so that we can move the "explosion" wherever we please. container = document.createElement("div"), //the following variables make things configurable. Play around. emitterSize = 40, dotQuantity = 30, dotSizeMax = 30, dotSizeMin = 10, speed = 1, gravity = 0; //setup the container with the appropriate styles container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;"; document.body.appendChild(container); //just for this demo, we're making the emitter's size dynamic and we set xPercent/yPercent to -50 to accurately center it. TweenLite.set(emitter, {width:emitterSize, height:emitterSize, xPercent:-50, yPercent:-50}); //The "explosion" is just a TimelineLite instance that we can play()/restart() anytime. This helps ensure performance is solid (rather than recreating all the dots and animations every time the user clicks) var explosion = createExplosion(container); function createExplosion(container) { var tl = new TimelineLite(), angle, length, dot, i, size; //create all the dots for (i = 0; i < dotQuantity; i++) { dot = document.createElement("div"); dot.className = "dot"; size = getRandom(dotSizeMin, dotSizeMax); container.appendChild(dot); angle = Math.random() * Math.PI * 2; //random angle //figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. length = Math.random() * (emitterSize / 2 - size / 2); //place the dot at a random spot within the emitter, and set its size. TweenLite.set(dot, { x:Math.cos(angle) * length, y:Math.sin(angle) * length, width:size, height:size, xPercent:-50, yPercent:-50, force3D:true }); //this is where we do the animation... tl.to(dot, 1 + Math.random(), { opacity:1, //if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D: x:Math.cos(angle) * length * 20, y:Math.sin(angle) * length * 20 }, 0); } return tl; } //just pass this function an element and it'll move the explosion container to its center and play the explosion animation. function explode(element) { var bounds = element.getBoundingClientRect(); TweenLite.set(container, {x:bounds.left + bounds.width / 2, y:bounds.top + bounds.height / 2}); explosion.restart(); } function getRandom(min, max) { return min + Math.random() * (max - min); } //explode initially, and then whenever the user presses on the dot. explode(emitter); emitter.onmousedown = emitter.ontouchstart = function() { explode(emitter); } //just for fun, I made the emitter draggable... Draggable.create("#emitter", {throwProps:true, bounds:window, edgeResistance:0.7});